
<style>
    .i_tit h2 {
        display: inline-block;
        text-align: center;
        font-size: 5rem;
        color: #169442;
        font-weight: 900;
        line-height: 5rem;
        position: relative;
        text-transform: uppercase;
    }
    .in_ab_text h5 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #100800;
    }
    .in_ablist{
        background-color: #ebebeb;
    }
    .in_ab_list p {
        margin-top: 2rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        color: #3e3a39;
    }
    @media(min-width:786px){
        .in_ab_logo h2 {
            margin-bottom: 0.2rem;
            font-size: 6rem;
            line-height: 6rem;
            color: transparent;
            font-weight: 900;
            -webkit-text-stroke: 1px rgba(0, 0, 0, .15);
        }
        .module1-img img{
            width: 80%;
            height: 500px;
        }
        .in_ab_cont{
            padding: 80px 0;
        }
        .wrap{
            width: 86%;
            margin: 0 auto;
            display: flex;
        }
        .in_ab_logo,.in_ab_list,.in_ct_text{
            width: 60%;
        }
        .in_ab_text,.in_ablist_v{
            width: 40%;
        }
        .in_ablist_cont{
            display: flex;
        }
        .in_ablist{
            padding: 50px 0 60px;
        }
        .in_ablist .slideInLeft{
            margin: 20px 4%;
            width: 40%;
            height: 220px;
            background-color: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 40px;
        }
        .in_ab_list{
            display: flex;
            flex-wrap: wrap;
        }
        .in_ablist_cont,.in_ct_cont{
            padding-left: 10%;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }
        .in_ct_t_list{
            display: flex;
            flex-wrap: wrap;
            margin: 30px 0;
        }
        .in_ct_t_list dt{
            width: 50%;
            padding-right: 10%;
        }
        .in_ct{
            padding: 50px 0 60px;
            background-color: #e4e4e4;
        }
        .in_ct_text .i_tit {
            margin: 0 0 2rem;
        }
        .in_ct_t_list .ico {
            position: relative;
            margin-left: 2rem;
            width: 8rem;
            height: 8rem;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #169442;
        }
        .in_ct_t_list .ico svg  {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 50%;
            max-height: 50%;
            object-fit: contain;
        }
        .in_ct_t_list h5 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #3e3a39;
        }
        .in_ct_t_list p {
            font-size: 6rem;
            color: #169442;
            line-height: 6rem;
        }
        .in_ct_list_box {
        width: 40%;
        margin-left: auto;
        height: 450px;
        box-sizing: border-box;
        padding: 2rem 2rem;
        background: #e4e4e4;
        border-radius: 1rem;
        overflow: hidden;
        margin-right: 8%;
        display: flex;
        justify-content: space-evenly;
        align-content: space-around;
        flex-wrap: wrap;
        }
        .module1-img{
            text-align: center;
            width:100%;
        }
        .slideInLeft .txt{
            margin-top: 30px;
        }
        .in_ab_text {
            text-align: center;
            width: 80%;
            margin: 0 10%;
        }
        .in_ab_text article{
            text-align: left;
            font-size:18px;
        }
        .pc-mk3{
            display: none;
        }
        .partner{
            width: 70%;
            margin:0 15%
        }
    }
    
    @media(max-width:785px) {
        .in_ab_logo img{
            width: 100%;
        }
        .i_tit{
            text-align: center;
        }
        .i_tit h2{
            margin: 10px 0 0 0;
            font-size: 3rem;
        }
        .slideInRight{
            padding: 0 8px;
        }
        .in_ab_list{
            display: flex;
            flex-wrap: wrap;
            padding-top: 50px;
        }
        .in_ab_list li{
            width: 50%;
        }
        .ico{
            text-align: center;
        }
        .in_ct_text{
            width: 90%;
            margin: auto;
        }
        .slideshow-container{
            margin: auto;
        }
        .m-mk3{
            display: none;
        }
        .in_ct_t_list{
            width: 100%;
            display: flex;
        }
        .in_ct_t_list dt{
            width: 50%;
            margin: 40px 0;
        }
        .in_ct_t_list h5 {
            font-size: 2rem;
            font-weight: bold;
            color: #3e3a39;
        }
        .in_ct_t_list p {
            font-size: 6rem;
            color: #169442;
            line-height: 6rem;
        }
        
    }
</style>
<!-- ABOUT US -->
<?php $aboutusy_mk1=dr_site_value('aboutusy_mk1');?>
<section class="in_about in_ab_louti">
    <div class="in_ab_cont box_pd">
        <div class="">
            <?php if ($aboutusy_mk1) { $key=0; foreach ($aboutusy_mk1 as $v) { ?>
            <div class="in_ab_logo wow slideInLeft module1-img">
                <img src="{dr_get_file($v[1])}">
            </div>
            <div class="in_ab_text">
                <div class="i_tit">
                    <h2>{usu_fanyi($v[2], $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
                </div>
                <h5 class="wow slideInRight">{usu_fanyi($v[3], $language)}</h5>
                <article class="wow slideInRight">{usu_fanyi($v[4], $language)} </article>
            </div>
            <?php  $key++; } } ?>
        </div>
    </div>
    <?php $aboutusy_mk12=dr_site_value('aboutusy_mk12');?>
    <div style="padding:0 10%">
        <div class="i_tit" style="text-align:center">
            <h2>{usu_fanyi('CERTIFICATES', $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
        </div>
        <div >
            {usu_fanyi($aboutusy_mk12, $language)}
        </div>
    </div>
    <?php $aboutusy_mk2=dr_site_value('aboutusy_mk2');?>
    <style type="text/css">
            .about-img{
                width: 100%;
            }
            .about-img img{
                width: 100%;
            }
        @media(max-width:786px){
            .mk2-left{
                display: flex;
            }
            .mk2-left li{    
                background-color: #fff;
                text-align: center;
                padding: 40px;
                width: 50%;
            }
            .mk2-left li p{
                margin: 0;
            }
            
            .image-list img{
                margin: 20px;
                height: 350px;
            }
            .in_ct_t_list{
                text-align: center;
            }
            .in_ct_t_list .ico {
                position: relative;
                margin-left: 30%;
                width: 8rem;
                height: 8rem;
                border-radius: 50%;
                background: #169442;
            }
            .in_ct_t_list .ico svg{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 50%;
                max-height: 50%;
                object-fit: contain;
            }
        }
        @media(min-width:786px){
            .ny-banner{
                width: 100%;
            }
            .in_ablist_cont, .in_ct_cont {
                padding:0 10%;
                justify-content: space-evenly;
                text-align: center;
            }
            .in_ct_t_list dt {
                padding: 0 5%;
            }
            .in_ct_t_list .ico {
               margin:0 30%;
            }
            .mk2-left{
                width: 30%;
                margin-right:50px;
            }
            .in_ablist .slideInLeft {
                 padding-top: 20px; 
            }
            
            .mk2-left li{
                width: 80%!important;
            }
            .mk2-left li p{
                margin: 0;
            }
            
            .mk2-r{
                width: 65%;
            }
            .image-list{
                display: flex;
                justify-content: center;
            }
            .image-list img{
                margin: 20px;
                height: 350px;
            }
        }
    </style>
</section>
<!-- certificate -->
<?php $aboutusy_mk3=dr_site_value('aboutusy_mk3');?>
<section class="in_ct in_ab_louti box_pd pc-mk3" >
    <div class="in_ct_cont">
        <?php if ($aboutusy_mk3) { $key=0; foreach ($aboutusy_mk3 as $v) { ?>
        <div class="in_ct_text">
            <div class="i_tit">
                <h2>{usu_fanyi($v[1], $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
            </div>
            <article class="wow slideInLeft">{usu_fanyi($v[2], $language)}</article>
            
            <?php $aboutussp=dr_site_value('aboutussp');?>
            <!-- <div>
                <iframe src="https://www.youtube.com/embed/{$aboutussp}" frameborder="0" style="width: 100%;height: 500px;
                border-radius: 15px;"></iframe>
            </div>  -->
            <dl class="in_ct_t_list">
                <dt class="wow slideInLeft" data-wow-delay=".1s">
                    <div class="txt">
                        <h5>{usu_fanyi($v[3], $language)}</h5>
                        <p>{usu_fanyi($v[5], $language)}</p>
                        <h5>{usu_fanyi($v[6], $language)}</h5>
                    </div>
                </dt>
                <dt class="wow slideInLeft" data-wow-delay=".1s">
                    <div class="txt">
                        <h5>{usu_fanyi($v[4], $language)}</h5>
                        <p>{usu_fanyi($v[7], $language)}</p>
                        <h5>{usu_fanyi($v[8], $language)}</h5>
                    </div>
                </dt>
            </dl>
            <article class="wow slideInLeft">{usu_fanyi($v[9], $language)}</article>
        </div>
        <?php  $key++; } } ?>
    </div>
</section>
<div class="clear"></div>
<section class="in_ct in_ab_louti box_pd m-mk3" >
    <div class="in_ct_cont">
        <?php if ($aboutusy_mk3) { $key=0; foreach ($aboutusy_mk3 as $v) { ?>
        <div class="in_ct_text">
            <div class="i_tit">
                <h2>{usu_fanyi($v[1], $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
            </div>
            <article class="wow slideInLeft">{usu_fanyi($v[2], $language)}</article>
            
            <?php $aboutussp=dr_site_value('aboutussp');?>
            <div style="margin:20px">
                <iframe src="https://www.youtube.com/embed/{$aboutussp}" frameborder="0" style="width: 100%;height: 500px;
                border-radius: 15px;"></iframe>
            </div> 
            <dl class="in_ct_t_list">
                <dt class="wow slideInLeft" data-wow-delay=".1s">
                    <div class="txt">
                        <h5>{usu_fanyi($v[3], $language)}</h5>
                        <p>{usu_fanyi($v[5], $language)}</p>
                        <h5>{usu_fanyi($v[6], $language)}</h5>
                    </div>
                </dt>
                <dt class="wow slideInLeft" data-wow-delay=".1s">
                    <div class="txt">
                        <h5>{usu_fanyi($v[4], $language)}</h5>
                        <p>{usu_fanyi($v[7], $language)}</p>
                        <h5>{usu_fanyi($v[8], $language)}</h5>
                    </div>
                </dt>
            </dl>
        <article class="wow slideInLeft">{usu_fanyi($v[9], $language)}</article>
        </div>
        <?php  $key++; } } ?>
    </div>
</section>
<div class="clear"></div>
<!-- partners -->
<section class="partner">
    <div class="i_tit" style="padding: 50px 0;text-align: center;">
        <h2>{usu_fanyi('BRANDS POWERED BY UNIGOGO', $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
    </div>
   {$aboutusypartners}
</section>
<div class="clear"></div> 
<!-- COMPANY ENVIRONMENT -->
<section class="in_factory in_ab_louti box_mg">
    <div class="i_tit" style="padding: 50px 0;text-align: center;">
        <h2>{usu_fanyi('Company Environment', $language)}<i class="wow slideInLeft" data-wow-duration="1s"></i></h2>
    </div>
    <div class="pr">
        <div class="in_factory_list swiper-container" style="height:300px">  
            <div id="container">
                <?php $aboutus_qyhj=dr_site_value('aboutus_qyhj');?>
                <ul id="content">
                    <?php if ($aboutus_qyhj) { $key=0;foreach ($aboutus_qyhj as $c) { ?>
                    <li><a href="#"><img src="{dr_get_file($c.file)}" class="image-slide"></a>
                    </li>
                    <?php $key++;} } ?>
                </ul>
                <style>
                    * {
                        margin: 0;
                        padding: 0;
                    }
                
                    img {
                        border: 0;
                    }
                
                    #container {
                        width: auto;
                        height: 300px;
                        overflow: hidden;
                        position: relative;
                    }
                
                    #container ul {
                        list-style: none;
                        width: 10000px;
                        position: absolute;
                    }
                
                    #container ul li {
                        width: auto;
                        height:300px;
                        float: left;
                        margin-right: 10px;
                
                    }
                
                    #content li a img {
                        width: auto;
                        height: 300px;
                    }
                </style>
                <script>
                    /* window.onload比 $(function(){}) 加载的更晚一些，这样那些宽度的计算在Chrome中就可以准确计算了*/
                    window.onload = function () {
                        /*计算一个segment的宽度*/
                        var segmentWidth = 0;
                        $("#container #content li").each(function () {
                            segmentWidth += $(this).outerWidth(true);
                        });
                        $("#container #content li").clone().appendTo($("#container #content"));
                        run(20000);
                        function run(interval) {
                            $("#container #content").animate({ "left": -segmentWidth }, interval, "linear", function () {
                                $("#container #content").css("left", 0);
                                run(20000);
                            });
                        }
                        $("#container").mouseenter(function () {
                            $("#container #content").stop();
                        }).mouseleave(function () {
                            var passedCourse = -parseInt($("#container #content").css("left"));
                            var time = 20000 * (1 - passedCourse / segmentWidth);
                            run(time);
                        });
                    };
                </script>
            </div>
        </div>
    </div>
</section>
<div class="clear"></div> 